<template>
  <a-row :gutter="4">
    <a-col :md="8">
      <a-card title="空间结构">
        <a-directory-tree multiple default-expand-all @select="onSelect" @expand="onExpand">
          <a-tree-node key="0-0" title="原辅库">
            <a-tree-node key="0-0-0" title="收料区" is-leaf />
            <a-tree-node key="0-0-1" title="待检区" is-leaf />
            <a-tree-node key="0-0-1" title="存储区" is-leaf>
              <a-tree-node key="0-0-1" title="A-001-0001" is-leaf />
              <a-tree-node key="0-0-1" title="A-001-0002" is-leaf />
              <a-tree-node key="0-0-1" title="A-001-0003" is-leaf />
              <a-tree-node key="0-0-1" title="A-001-0004" is-leaf />
            </a-tree-node>
            <a-tree-node key="0-0-1" title="拣货区" is-leaf />
            <a-tree-node key="0-0-1" title="复核区" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-1" title="线边库">
            <a-tree-node key="0-1-0" title="收料区" is-leaf />
            <a-tree-node key="0-1-0" title="待检区" is-leaf />
            <a-tree-node key="0-1-0" title="存储区" is-leaf />
            <a-tree-node key="0-1-0" title="拣货区" is-leaf />
            <a-tree-node key="0-1-0" title="复核区" is-leaf />
          </a-tree-node>
          <a-tree-node key="0-2" title="成品库">
            <a-tree-node key="0-2-0" title="收料区" is-leaf />
            <a-tree-node key="0-2-0" title="待检区" is-leaf />
            <a-tree-node key="0-2-0" title="存储区" is-leaf />
            <a-tree-node key="0-2-0" title="拣货区" is-leaf />
            <a-tree-node key="0-2-0" title="复核区" is-leaf />
          </a-tree-node>
        </a-directory-tree>
      </a-card>
    </a-col>
    <a-col :md="16">
      <a-card>
        <a-form @submit="handleSubmit" :form="form" class="form">
          <a-row :gutter="[8]">
            <a-col :lg="6" :md="8" :sm="12">
              <a-form-item>
                <a-input placeholder="请输入编码" />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="8" :sm="12">
              <a-form-item>
                <a-input placeholder="请输入名称" />
              </a-form-item>
            </a-col>
            <a-col :lg="6" :md="8" :sm="12">
              <a-form-item>
                <a-space>
                  <a-button type="primary">查询</a-button>
                  <a-button>重置</a-button>
                </a-space>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
        <vxe-toolbar>
          <template #buttons>
            <a-space>
              <a-button type="primary">添加</a-button>
              <a-button>导入</a-button>
              <a-button type="danger">批量删除</a-button>
            </a-space>
          </template>
        </vxe-toolbar>
        <vxe-table ref="xTable1" border stripe height="400"
          :checkbox-config="{ trigger: 'row', highlight: true, range: true }" :column-config="{ resizable: true }"
          :row-config="{ isHover: true }" :data="tableData"
          :custom-config="{ storage: true, checkMethod: checkColumnMethod }">
          <vxe-column type="checkbox" width="40"></vxe-column>
          <vxe-column type="seq" width="30"></vxe-column>
          <vxe-column field="编码" title="编码" sortable width="100">
            <template #default="{ rowIndex }">LOC-0000{{ rowIndex + 1 }}</template>
          </vxe-column>
          <vxe-column field="名称" title="名称" sortable show-overflow></vxe-column>
          <vxe-column field="上级区域" title="上级区域" sortable show-overflow></vxe-column>
          <vxe-column field="备注" title="备注" show-overflow></vxe-column>
          <vxe-column field="操作" title="操作" fixed="right" width="150">
            <template #default>
              <a-button type="link">编辑</a-button>
              <a-button type="link" danger>删除</a-button>
            </template>
          </vxe-column>
        </vxe-table>
        <vxe-pager border icon-prev-page="vxe-icon-arrow-left" icon-jump-prev="vxe-icon-arrow-double-left"
          icon-jump-next="vxe-icon-arrow-double-right" icon-next-page="vxe-icon-arrow-right"
          icon-jump-more="vxe-icon-ellipsis-h" :loading="loading" :current-page="1" :page-size="20" :total="100"
          :layouts="['PrevPage', 'JumpNumber', 'NextPage', 'FullJump', 'Sizes', 'Total']" @page-change="handlePageChange">
        </vxe-pager>
      </a-card>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'Table',
  data() {
    return {
      loading: false,
      page: 1,
      pageSize: 10,
      total: 0,
      tableData: [
        {
          "编码": "0001",
          "名称": "收料区",
          "上级区域": "原辅库",
          "备注": "",
        },
        {
          "编码": "0002",
          "名称": "待检区",
          "上级区域": "原辅库",
          "备注": "",
        },
        {
          "编码": "0003",
          "名称": "存储区",
          "上级区域": "原辅库",
          "备注": "",
        },
        {
          "编码": "0004",
          "名称": "拣货区",
          "上级区域": "原辅库",
          "备注": "",
        },
        {
          "编码": "0005",
          "名称": "复核区",
          "上级区域": "原辅库",
          "备注": "",
        }
      ]
    }
  },
  created() {
  },
  methods: {

  }
}
</script>

<style scoped lang="less"></style>